<template>
  <div>
    <page-filter ref="filter"
                 :config="config"
                 @submit="handleFilterSubmit"/>

    <page-action ref="action"
                 :config="config"
                 class="mt-2"
                 @change="handleActionChange"/>

    <page-table ref="table"
                :config="config"
                class="mt-2"/>
  </div>
</template>

<script setup>
const {config} = defineProps(['config']);
const table = ref(null);
const filter = ref(null);

const handleFilterSubmit = params => {
  table.value.loadData({
    params,
    page: 1
  });
}

const handleActionChange = () => {
  table.value.loadData();
}

onMounted(() => {
  table.value.loadData({
    params: filter.value.getParams()
  });
});
</script>
